<template>
	<view v-if="list.length" class="list">
		<view v-for="(item, index) in list" :key="index" class="item-content">
			<view class='item-avatar'>
				<image @click="goUserDetail(item.uid)" :src="item.avatar || '/static/images/f.png'" />
				<view class="item-user-icon">
					<image v-if="!item.is_start" @click.stop="followAuthor(index, 1)" :src="domain + '/uploads/def/20230709/128e2b523dc46080c40bf86b5bde2c83.png'" />
					<image v-else @click.stop="followAuthor(index, 0)" :src="domain + '/uploads/def/20230709/5e62394195454a9c2894ae3865495547.png'" />
				</view>
			</view>
			<view @click="goUserDetail(item.uid)" class='item-nickanme line1'>
				{{item.nickname}}
			</view>
			<view @click="goUserDetail(item.uid)" class='item-label line1'>
				{{item.label[0]}}
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex";
	import { configMap } from '@/utils';
	import { HTTP_REQUEST_URL } from '@/config/app';
	import {  followAuthorApi } from '@/api/community.js';
	export default {
		components: {
		},
		data() {
			return {
				domain: HTTP_REQUEST_URL,
			}
		},
		props: {
			list: {
				type: Array|Object,
				default: () => []
			},
		},
		computed: configMap(['hide_mer_status'], mapGetters(['isLogin','viewColor','keyColor'])),
		created() {
		},
		methods: {
			// 用户详情
			goUserDetail(uid) {
				this.$util.Tips('/pages/plantGrass/plant_user/index?id='+uid)
			},
			// 关注作者
			followAuthor: function(key, status) {
				if (this.isLogin === false) {
					this.$util.Tips({title: '请先登录'})
				} else {
					let that = this;
					followAuthorApi(that.list[key].uid,{status: status}).then(res => {
						if (res.status === 200) {
							that.list[key].is_start = status
							that.$set(that, 'list', that.list);
						}
						that.$util.Tips({
							title: res.message
						});
					}).catch(err=>{
						that.$util.Tips({
							title: err
						});
					});
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	.list {
		overflow: hidden;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 40rpx;
		padding: 20rpx 0;
		.item-content {
			text-align: center;
			overflow: hidden;
			.item-avatar {
				width: 98rpx;
				height: 98rpx;
				margin: 0 auto;
				position: relative;
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 98rpx;
					height: 98rpx;
					border-radius: 50%;
				}
				.item-user-icon {
					position: absolute;
					bottom: -16rpx;
					width: 36rpx;
					height: 36rpx;
					image {
						width: 36rpx;
						height: 36rpx;
						border-radius: 50%;
					}
				}
			}
			.item-nickanme {
				font-size: 28rpx;
				font-weight: 500;
				color: #37393A;
				line-height: 40rpx;
				margin-top: 30rpx;
			}
			.item-label {
				font-size: 24rpx;
				font-weight: 400;
				color: #767676;
				line-height: 34rpx;
				margin-top: 6rpx;
			}
		}
	}
</style>